<template>
    <el-dialog v-model="visible" @closed="closed" @open="loadLeaveApplyDetail" width="70%" :show-close="false" custom-class="el-dialog1">
        <div class="proinst-info" v-if="proInstDetail">
<!--            <el-row>-->
<!--                <el-col :span="14">-->
<!--                    流程实例编号：{{proInstDetail.processInstanceId}}-->
<!--                </el-col>-->
<!--            </el-row>-->
            <el-row>
                <el-col :span="4">
                    申请人： {{proInstDetail.variables.startUserName}}
                </el-col>
                <el-col :span="8">
                    请假事由：{{proInstDetail.variables.cause}}
                </el-col>
                <el-col :span="6">
                    开始时间：{{new Date(proInstDetail.variables.beginTime+'').format('yyyy-MM-dd hh:mm:ss')}}
                </el-col>
                <el-col :span="6">
                    结束时间：{{new Date(proInstDetail.variables.endTime+'').format('yyyy-MM-dd hh:mm:ss')}}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    请假天数：{{proInstDetail.variables.days}}
                </el-col>
                <el-col :span="8">
                    流程状态： {{proInstDetail.isEnd?'已结束':'处理中'}}
                </el-col>
                <el-col :span="6">
                    申请结果：{{proInstDetail.isEnd?(proInstDetail.approved?'通过':'未通过'):null}}
                </el-col>
            </el-row>
        </div>
        <div class="node-list" v-if="proInstDetail">
            <el-row>
                <el-col :span="12">
                    流程详情信息：
                </el-col>
            </el-row>
            <el-table :data="proInstDetail.proNodeList">
<!--                approved: null-->
<!--                assignee: "12"-->
<!--                assigneeName: "李克成"-->
<!--                durationMillisecond: 2939070-->
<!--                endTime: "2022-06-01 16:25:45"-->
<!--                nodeName: "人事审批"-->
<!--                reply: null-->
<!--                startTime: "2022-06-01 15:36:46"-->
                <el-table-column label="节点名称" prop="nodeName" width="140px"/>
                <el-table-column label="审批人员" prop="assigneeName" width="90px"/>
                <el-table-column label="审批结果" width="90px">
                    <template #default="s">
                        <el-tag type="success" v-if="s.row.variables.approved">通过</el-tag>
                        <el-tag type="danger" v-if="s.row.variables.approved===false">未通过</el-tag>
                        <el-tag type="info" v-if="s.row.variables.approved===null">审批中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="startTime"/>
                <el-table-column label="完成时间" prop="endTime"/>
                <el-table-column label="耗时">
                    <template #default="s">
                        {{showDuration(s.row.durationMillisecond)}}
                    </template>
                </el-table-column>
                <el-table-column label="回复">
                    <template #default="s">
                        {{s.row.variables.reply}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <el-button @click="visible=false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {lookEvectionDetail} from "../../../../network/process/evection-process";
import {getLeaveApplyDetail} from "../../../../network/process/leave-process";

export default {
    name: "LeaveApplyDetail",
    data(){
        return{
            visible: false,
            processInstanceId: null,
            proInstDetail: null
        }
    },
    methods: {
        closed(){
            Object.assign(this.$data,this.$options.data.call(this))
        },
        showDuration(duration){
            return this.$utils.getDuration(duration);
        },
        loadLeaveApplyDetail(){
            getLeaveApplyDetail(this.processInstanceId).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.proInstDetail = vo.data;
                    },
                    log: `流程实例${this.processInstanceId}详情`
                })
            })
        }
    },
    // watch:{
    //     processInstanceId(){
    //
    //         this.loadEvectionDetail();
    //     }
    // }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.proinst-info .el-row{
    margin-bottom: 10px;
}
.node-list{
    
}
</style>
<style>
.el-dialog1 .el-dialog__header{
    padding: 0;
}
.el-dialog1 .el-dialog__body{
    padding-bottom: 0;
}
</style>